/*
 * @Author: xiaosihan 
 * @Date: 2024-10-30 10:15:42 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-30 17:46:20
 */


import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./leftImg.module.less";
import lPNG from "./l.png";
import modelIntroductionStore from "../modelIntroductionStore";
import clsx from "clsx";

interface Iprops {
    children?: ReactNode
}

// 
export default function LeftImg(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [active, setActive] = useState(modelIntroductionStore.modelTypeActive);
    useEffect(() => autorun(() => {
        setActive(modelIntroductionStore.modelTypeActive);
    }, { delay: 10 }), []);

    return (
        <div ref={dom} className={styles.leftImg} >

            <span
                className={clsx(styles.btn1, active === 0 && styles.active)}
                onClick={() => modelIntroductionStore.setModelTypeActive(0)}
            ></span>
            <span
                className={clsx(styles.btn2, active === 1 && styles.active)}
                onClick={() => modelIntroductionStore.setModelTypeActive(1)}
            ></span>
            <span
                className={clsx(styles.btn3, active === 2 && styles.active)}
                onClick={() => modelIntroductionStore.setModelTypeActive(2)}
            ></span>
            <span
                className={clsx(styles.btn4, active === 3 && styles.active)}
                onClick={() => modelIntroductionStore.setModelTypeActive(3)}
            ></span>
            <span
                className={clsx(styles.btn5, active === 4 && styles.active)}
                onClick={() => modelIntroductionStore.setModelTypeActive(4)}
            ></span>

            <img src={lPNG} alt="" />
        </div>
    );

}